<template>
    <div>
     <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品分类</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 卡片区域 -->
      <el-card>
          <!-- 添加分类 -->
        <el-row>
            <el-col>
                <el-button type="primary" @click="showAddCateDialog">添加商品</el-button>
            </el-col>
        </el-row>
        <!-- 列表区域 -->
            <tree-table class="treeTable" :data="catelist" :columns="columns" :selection-type="false" :expand-type="false" show-index index-text="#" border :show-row-hover="false">
                <!-- 是否有效 -->
                <template slot="isok" slot-scope="scope" >
                     <i class="el-icon-success" v-if="scope.row.cat_deleted===false" style="color:lightgreen;"></i>
                    <i class="el-icon-error" v-else style="color:red;"></i>
                </template>
                <!-- 等级 -->
                <template slot="order" slot-scope="scope" >
                    <el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
                    <el-tag type="success" size="mini" v-else-if="scope.row.cat_level===1">二级</el-tag>
                    <el-tag type="warning" size="mini" v-else>三级</el-tag>
                </template>
                <!-- 操作 -->
                <template slot="opt" slot-scope="scope" >
                   <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
                   <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
                </template>
            </tree-table>
        <!-- 分页区域 -->
         <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[3, 5, 10, 15]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
      </el-card>
      <!-- 添加分类按钮 -->
      <el-dialog
      title="添加分类"
      :visible.sync="addCateDialogVisible"
      width="50%" @close="addCateFormClose">
      <!-- 分类输入框 -->
        <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px">
        <el-form-item label="分类名称" prop="cat_name">
            <el-input v-model="addCateForm.cat_name"></el-input>
        </el-form-item>
            <!-- 父级分类 -->
            <!-- options用于指定数据源 -->
            <!-- props用于指定数据对象 -->
        <el-form-item label="父级名称" >
            <el-cascader
             expand-trigger="hover"
            v-model="selectdKeys"
            :options="parentCateList"
             :props="cascaderProps"
            @change="parentCateChanged" clearable></el-cascader>     
        </el-form-item>
        </el-form>
    
      <span slot="footer" class="dialog-footer">
          <el-button @click="addCateDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addCate">确 定</el-button>
      </span>
      </el-dialog>
    </div>
</template>
<script>

export default {
    data(){
        return {
            querInfo:{
              type:3,
              pagenum:1,
              pagesize:5  
            },    
            catelist:[],
            // 总数据条数
            total:0,
            // 为table指定列
            columns:[{
                label:'分类名称',
                prop:'cat_name'
            },{
                label:'是否有效',
                // 表示当前列电仪为模板列
                type:'template',
                // 表示当前这一列使用模板名称
                template:'isok'
            },
            {
                label:'等级',
                // 表示当前列电仪为模板列
                type:'template',
                // 表示当前这一列使用模板名称
                template:'order'
            },
            {
                label:'操作',
                // 表示当前列电仪为模板列
                type:'template',
                // 表示当前这一列使用模板名称
                template:'opt'
            }],
            // 添加分类的表单数据对象
            addCateDialogVisible:false,
            // 添加分类的表单
            addCateForm:{
                // 分类名称
                cat_name:'',
                // 分类父级ID
                cat_pid:1,
                // 分类的等级，默认要添加的是1级
                cat_level:0
            },
            // 添加分类数据的验证规则
            addCateFormRules:{
                 cat_name:[
                     {required:true,message:'请输入分类名称',trigger:'blur'}]
            },
            // 父级分类选择列表
            parentCateList:[],
            // 指定级联选择器选择的配置列表
            cascaderProps:{
                value:'cat_id',
                label:'cat_name',
                children:'children'
            },
            // 选中的父级分类数组
            selectdKeys:[]

        }
    },
    created(){
        this.getCateList()
    },
    methods:{
        // 获取商品分类
      async getCateList (){
         const {data:res} = await this.$http.get('categories',{params:this.querInfo})

         if(res.meta.status!==200){
           return this.$message.error('获取商品分类失败')
            }
            console.log(res.data);
            //把数据赋值给catelist
            this.catelist=res.data.result
            //为总数据条数赋值
            this.total=res.data.total
        },
     handleSizeChange(newSize){
            this.querInfo.pagesize=newSize
            this.getCateList()
        },
     handleCurrentChange(newPage){
            this.querInfo.pagenum=newPage
            this.getCateList()
        },
        // 点击按钮 展示添加已分类对话框
        showAddCateDialog(){
            // 先获取父级列表
            this.getParentCateList(),
            this.addCateDialogVisible=true
        },
        // 获取父级分类列表
        async getParentCateList(){
           const {data:res} = await this.$http.get('categories',{params:{type:2}})
            if(res.meta.status!==200){
                return this.message.error('获取数据失败!')
            }
            console.log(res.data);
            this.parentCateList=res.data
            
        },
        parentCateChanged(){
            console.log(this.selectdKeys);
            //如果selectdKeys的length大于0则证明选中的是父级分类
            // 反之，则没有选中父级分类
            if(this.selectdKeys.length>0){
                // 父级分类id
                this.addCateForm.cat_pid=this.selectdKeys[this.selectdKeys.length-1]
                // 为当前分类赋值
                this.addCateForm.cat_level=this.selectdKeys.length
                return
            }else{
             this.addCateForm.cat_pid=0
                // 为当前分类赋值
                this.addCateForm.cat_level=0

        }

        },
        // 点击按钮添加新分类
        addCate(){
            this.$refs.addCateFormRef.validate( async valid=> {
                if (!valid) return
                const {data:res} = await this.$http.post('categories',this.addCateForm)
                if (res.meta.status!==201){
                    return this.$message.error('添加分类数据列表失败')
                }
                this.$message.success('添加分类成功')
                this.getCateList()
                this.addCateDialogVisible=false
            })
            
        },
        // 监听对话框关闭事件
        addCateFormClose(){
            this.$refs.addCateFormRef.resetFields()
            this.selectdKeys=[]
            this.addCateForm.cat_pid=0
            this.addCateForm.cat_level=0

        }
       
    }
}
</script>

<style lang="less" scoped>
.treeTable {
    margin-top: 15px;
}
.el-cascader {
    width: 100%;
}

</style>